<template>
  <div id="multi-line"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

export default {
  name: "MultiLine",
  props: ["lineData"],
  mounted() {
    var chartDom = document.getElementById("multi-line");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "Stacked Line",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["成绩", "班级排名", "标准化成绩"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [],
    };
    option.xAxis.data = this.lineData.xAxis;
    option.series = this.lineData.series;

    option && myChart.setOption(option);
  },
};
</script>

<style lang='less' scoped>
#multi-line {
  width: 100%;
  height: 100%;
}
</style>